<template>
  <smart-page>

    <template #search>
      <smart-search :query-array="ACCOUNT_SEARCH" @on-handler="onSearch"/>
    </template>
    <a-table v-model:selectedKeys="selectedKeys"
             :table-layout-fixed="theme.layoutFixed"
             :row-selection="rowSelection"
             :columns="ACCOUNT_COLUMNS"
             :row-key="rowKey"
             :column-resizable="theme.resizable"
             :bordered="theme.bordered"
             :stripe="theme.stripe"
             :sticky-header="theme.sticky"
             :hoverable="theme.hoverAble"
             :pagination="pagination"
             :loading="theme.loading"
             :data="dataSource"
             @page-change="onPageChange"
             @page-size-change="onPageSizeChange">
      <template #action="{ record }">
        <a-space size="mini">
          <a-link @click="readCtr.open(record)" v-auth="Acl.MEMBER_PROFILE_ACCOUNT_BILL_LIST">金币账单</a-link>
          <a-link status="danger" @click="editCtr.open(record)" v-auth="Acl.MEMBER_PROFILE_ACCOUNT_CHANGE_COIN" >调金币</a-link>

        </a-space>
      </template>
    </a-table>

    <bill-modal :record="readCtr.record" v-if="readCtr.show" @cancel="readCtr.close" />
    <change-coin :record="editCtr.record" v-if="editCtr.show"  @cancel="editCtr.close" />
  </smart-page>
</template>
<script lang="ts" setup name="finance-account-alipay">
import {onMounted} from 'vue';

import {ACCOUNT_SEARCH} from '../resource/search'
import {ACCOUNT_COLUMNS} from "../resource/colums";
import {TablePage} from "@/libs/core";
import {SystemHttp} from "../resource/http";
import BillModal from  './bill.vue'
import ChangeCoin from  './change-coin.vue'
import {Acl} from "@/libs/acl";

const pageConfig = {title: '会员账户', rowKey: 'id', nameKey: 'title'}
const {getAccountPage, delAccount} = SystemHttp
const tablePage = new TablePage(pageConfig).setFetchXhr(getAccountPage).setDeleteXhr(delAccount).setPermission(Acl.MEMBER_PROFILE_ACCOUNT_PAGE_LIST);
const {theme, pagination, rowKey, dataSource, rowSelection, selectedKeys, editCtr, readCtr} = tablePage
const {onFetch, onPageChange, onPageSizeChange, onDelete, onSearch} = tablePage
onMounted(() => onFetch())
</script>

